<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=1"/>
    <meta name="wap-font-scale" content="no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <title></title>
    <link rel="stylesheet" href="css/neat.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                    };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body style="overflow: hidden;">
    <div class="top-search"><input type="text" class="input" placeholder="Search by name"/></div>
    <div class="wrapper1">
        <ul class="sorts-list">
            <li>Shoes</li>
            <li>Bags</li>
            <li>T-Shirts</li>
            <li>Blazers</li>
            <li>Jumpers</li>
            <li>Sunglasses</li>
            <li>Shorts</li>
        </ul>
        <div class="wrapper-icons clearfix">
            <ul>
                <li>
                    <div><img src="img/person.png" alt="" class="person"/></div>
                </li>
                <li>
                    <div><img src="img/bag.png" alt="" class="shopping-bag"/><span class="bag-num">3</span></div>
                </li>
                <li>
                    <div><img src="img/exit.png" alt="" class="exit"/></div>
                </li>
            </ul>
        </div>
    </div>
    <div class="wrapper2">
        <header class="index-header">
            <div><i class="icon-menu"></i></div>
            <div>
                <p class="head-title">Cart</p>
                <p class="head-info"><span class="item-num"></span> items</p>
            </div>
            <div class="other-icon">
                <p><i class="icon-dot"></i></p>
            </div>
        </header>
        <section class="con" style="height:calc(100% - 10.2rem);">
            <div class="cart-area">
                <div class="left-action">
                    <div class="mark-edit"><img src="img/pen.png" alt=""/></div>
                </div>
                <div class="cart-product">
                    <img src="img/goods08.png" alt="" class="cart-product-pic"/>
                    <div class="cart-product-info">
                        <p class="cart-product-name">Herschel Supply Co Roy Billfold Wallet</p>
                        <p class="cart-product-size">Small</p>
                    </div>
                    <div class="cart-product-price">$<span>59.00</span></div>
                    <div class="cart-product-num">
                        <div class="plus">+</div>
                        <div class="cart-num-input">1</div>
                        <div class="minus">-</div>
                    </div>
                </div>
                <div class="right-action">
                    <div class="mark-favorite"><img src="img/heart.png" alt=""/></div>
                    <div class="mark-del"><img src="img/cross.png" alt=""/></div>
                </div>
            </div>
            <div class="cart-area">
                <div class="left-action">
                    <div class="mark-edit"><img src="img/pen.png" alt=""/></div>
                </div>
                <div class="cart-product">
                    <img src="img/goods04.png" alt="" class="cart-product-pic"/>
                    <div class="cart-product-info">
                        <p class="cart-product-name">Herschel Supply Co Roy Billfold Wallet</p>
                        <p class="cart-product-size">Small</p>
                    </div>
                    <div class="cart-product-price">$<span>31.30</span></div>
                    <div class="cart-product-num">
                        <div class="plus">+</div>
                        <div class="cart-num-input">1</div>
                        <div class="minus">-</div>
                    </div>
                </div>
                <div class="right-action">
                    <div class="mark-favorite"><img src="img/heart.png" alt=""/></div>
                    <div class="mark-del"><img src="img/cross.png" alt=""/></div>
                </div>
            </div>
            <div class="cart-area">
                <div class="left-action">
                    <div class="mark-edit"><img src="img/pen.png" alt=""/></div>
                </div>
                <div class="cart-product">
                    <img src="img/goods05.png" alt="" class="cart-product-pic"/>
                    <div class="cart-product-info">
                        <p class="cart-product-name">Herschel Supply Co Roy Billfold Wallet</p>
                        <p class="cart-product-size">Small</p>
                    </div>
                    <div class="cart-product-price">$<span>31.30</span></div>
                    <div class="cart-product-num">
                        <div class="plus">+</div>
                        <div class="cart-num-input">1</div>
                        <div class="minus">-</div>
                    </div>
                </div>
                <div class="right-action">
                    <div class="mark-favorite"><img src="img/heart.png" alt=""/></div>
                    <div class="mark-del"><img src="img/cross.png" alt=""/></div>
                </div>
            </div>
            <div class="cart-area">
                <div class="left-action">
                    <div class="mark-edit"><img src="img/pen.png" alt=""/></div>
                </div>
                <div class="cart-product">
                    <img src="img/goods01.png" alt="" class="cart-product-pic"/>
                    <div class="cart-product-info">
                        <p class="cart-product-name">Herschel Supply Co Roy Billfold Wallet</p>
                        <p class="cart-product-size">Small</p>
                    </div>
                    <div class="cart-product-price">$<span>31.30</span></div>
                    <div class="cart-product-num">
                        <div class="plus">+</div>
                        <div class="cart-num-input">1</div>
                        <div class="minus">-</div>
                    </div>
                </div>
                <div class="right-action">
                    <div class="mark-favorite"><img src="img/heart.png" alt=""/></div>
                    <div class="mark-del"><img src="img/cross.png" alt=""/></div>
                </div>
            </div>
            <div class="cart-area">
                <div class="left-action">
                    <div class="mark-edit"><img src="img/pen.png" alt=""/></div>
                </div>
                <div class="cart-product">
                    <img src="img/goods06.png" alt="" class="cart-product-pic"/>
                    <div class="cart-product-info">
                        <p class="cart-product-name">Herschel Supply Co Roy Billfold Wallet</p>
                        <p class="cart-product-size">Small</p>
                    </div>
                    <div class="cart-product-price">$<span>31.30</span></div>
                    <div class="cart-product-num">
                        <div class="plus">+</div>
                        <div class="cart-num-input">1</div>
                        <div class="minus">-</div>
                    </div>
                </div>
                <div class="right-action">
                    <div class="mark-favorite"><img src="img/heart.png" alt=""/></div>
                    <div class="mark-del"><img src="img/cross.png" alt=""/></div>
                </div>
            </div>
        </section>
        <footer class="cart-footer">
            <div class="subtotal clearfix">
                <span>subtotal</span>
                <p>$<span class="total-num"></span></p>
            </div>
            <button class="btn btn-blue check-out">Check Out</button>
            <button class="btn btn-ghost-blue">Save Items</button>
        </footer>
    </div>
    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/animate.js"></script>
    <script src="js/fade.js"></script>
    <script src="js/public.js"></script>
    <script src="js/goto.js"></script>
</body>
</html>